<template>
  <el-dialog :title="createFacultyForm.id?'修改教职工':'添加教职工'" :visible.sync="showFacultyDialog" width="1000px"
             @closed="handleClose" :destroy-on-close="true" :lock-scroll="false" @open="dialogOpen">

    <div class="el-dialog-div">
      <el-form :model="createFacultyForm" ref="createFacultyForm" :rules="createFacultyRules" label-width="100px">

        <el-row>
          <el-col :span="5">
            <el-row class="el-row">
              <h6>教职工上传</h6>
              <el-col>
                <uploadImage :limit="1" v-model="createFacultyForm.avatar" :value="createFacultyForm.avatar"></uploadImage>
              </el-col>
              <hr/>
            </el-row>
            <el-row>
              <el-col>
                抓拍上传
              </el-col>
              <hr/>
            </el-row>
          </el-col>
          <el-col :span="19" style="padding-left:8px;border-left: solid gray 1px">
            <h4>教职工信息</h4>

            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名：" prop="name">
                  <el-input v-model="createFacultyForm.name" placeholder="请输入教职工姓名" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别：" prop="gender">
                  <el-select v-model="createFacultyForm.gender" placeholder="请选择性别" class="ele-block" clearable>
                    <el-option
                        v-for="item in genders"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row class="el-row">
              <el-col :span="12">
                <el-form-item label="工号：" prop="number">
                  <el-input v-model="createFacultyForm.number" placeholder="请输入工号" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话：" prop="mobile">
                  <el-input v-model="createFacultyForm.mobile" placeholder="请输入联系电话" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="证件类型：" prop="idcard_type">
                  <el-select v-model="createFacultyForm.idcard_type" placeholder="请选择证件类型" class="ele-block" clearable>
                    <el-option
                        v-for="item in idcardTypes"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code + ':' + item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="证件号：" prop="idcard">
                  <el-input v-model="createFacultyForm.idcard" placeholder="请输入证件号" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="角色：" prop="role_id">
                  <el-select v-model="createFacultyForm.role_id" placeholder="请选择角色" class="ele-block" clearable multiple>
                    <el-option
                        v-for="item in workerRoles"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期：" prop="birthday">
                  <el-input v-model="createFacultyForm.birthday" placeholder="请输入出生日期" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="户籍：" prop="census_register">
                  <el-input v-model="createFacultyForm.census_register" placeholder="请输入户籍" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="住址：" prop="address">
              <el-input v-model="createFacultyForm.address" placeholder="请输入住址" clearable/>
            </el-form-item>

            <el-form-item label="备注：" prop="note">
              <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注"
                  v-model="createFacultyForm.note">
              </el-input>
            </el-form-item>

            <h4>考勤卡信息</h4><span>（当前设备考勤卡号只支持与人脸同步下发）</span>
            <el-form-item label="ic卡号1：" prop="ic_card1">
              <el-input v-model="createFacultyForm.ic_card1" placeholder="请输入ic卡号1" clearable/>
            </el-form-item>

            <el-form-item label="ic卡号2：" prop="ic_card2">
              <el-input v-model="createFacultyForm.ic_card2" placeholder="请输入ic卡号2" clearable/>
            </el-form-item>

            <el-form-item label="ic卡号3：" prop="ic_card3">
              <el-input v-model="createFacultyForm.ic_card3" placeholder="请输入ic卡号3" clearable/>
            </el-form-item>

            <h4>关联班级</h4>
            <div v-for="(item, index) in createFacultyForm.dynamicItem" :key="index">
              <el-row class="el-row">
                <el-col :span="6">
                  <el-form-item
                      label="班级"
                      :prop="'dynamicItem.' + index + '.relation.class_id'"
                      :rules="{required: true, message: '班级不能为空', trigger: 'blur'}"
                      :key="item.key"
                      label-width="50px"
                  >
                    <el-select v-model="item.relation.class_id" placeholder="请选择" class="ele-block" clearable>
                      <el-option-group
                          v-for="group in grades"
                          :key="group.name"
                          :label="group.name">
                        <el-option
                            v-for="item in group.classes"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item
                      label="职务"
                      :prop="'dynamicItem.' + index + '.relation.role_id'"
                      :rules="{required: true, message: '职务不能为空', trigger: 'blur'}"
                      :key="item.key"
                      label-width="50px"
                  >
                    <el-select v-model="item.relation.role_id" placeholder="请输入职务" class="ele-block" clearable>
                      <el-option
                          v-for="item in dutys"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code + ':' + item.name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item
                      label="科目"
                      :prop="'dynamicItem.' + index + '.relation.subject_code'"
                      :rules="{required: true, message: '科目不能为空', trigger: 'blur'}"
                      :key="item.key"
                      label-width="50px"
                  >
                    <el-select v-model="item.relation.subject_code" placeholder="请输入科目" class="ele-block" clearable>
                      <el-option
                          v-for="item in subjects"
                          :key="item.value"
                          :label="item.name"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item>
                    <el-button type="danger" icon="el-icon-delete" @click="deleteItem(item, index)" round></el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <el-row class="el-row">
              <el-col :span="6" :offset="20">
                <el-button @click="addItem" type="primary">添加班级</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="showFacultyDialog=false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImage from '@/components/uploadImage'
export default {
  name: "CreateFaculty",
  components: {uploadImage},
  data() {
    return {

      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      genders: [
        {'value': 1, name: '男'},
        {'value': 2, name: '女'},
        {'value': 3, name: '未知'},
      ],
      idcardTypes: [],
      workerRoles: [],
      grades: [], // 以年级分组的班级
      dutys: [], // 所有教职工职务
      subjects: [], // 所有科目
      createFacultyForm: {
        dynamicItem: [],
      },  // 表单数据
      createFacultyRules: {  // 表单验证规则
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
      },
      showFacultyDialog: this.showAddFacultyForm // 子组件不能直接修改父组件prop参数
    };
  },
  props: {
    showAddFacultyForm: {
      type: Boolean,
      default() {
        return false;
      }
    },
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['createGradeForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({lock: true});
          this.$http.post('/grade/edit', this.createFacultyForm).then(res => {
            loading.close();
            if (res.data.code === 200) {
              this.$message({type: 'success', message: res.data.msg});
              this.$emit('reload')
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /**
     * 关闭页面
     */
    handleClose(hide) {
      if (hide) {
        hide();
      }
      this.createFacultyForm={} // 清空表单数据
      this.$emit('update:showAddFacultyForm', false)
    },
    addItem () {
      this.createFacultyForm.dynamicItem.push({
        'relation':{
          'class_id': '',
          'role_id': '',
          'subject_code': '',
        }
      })
    },
    deleteItem (item, index) {
      this.createFacultyForm.dynamicItem.splice(index, 1)
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    /**
     * 对话框弹出时回调方法
     */
    dialogOpen() {
      this.getIdcardTypes();
      this.getWorkerRoles();
      this.getClasses();
      this.getDutys();
      this.getSubjects();
    },
    getIdcardTypes() {
      this.$http.get('/worker/getIdcardTypes').then(res => {
        if (res.data.code === 200) {
          this.idcardTypes = res.data.result;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getWorkerRoles() {
      this.$http.get('/role/getIdName').then(res => {
        if (res.data.code === 200) {
          this.workerRoles = res.data.result;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getClasses() {
      this.$http.get('/grade/getClassesGroupByGrade').then(res => {
        if (res.data.code === 200) {
          this.grades = res.data.result[0];
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取教职工角色 TODO 应该从角色表中获取
     */
    getDutys() {
      this.$http.get('/dictType/class_duty_code').then(res => {
        this.loading = false;
        if (res.data.code === 200) {
          this.dutys = res.data.result;
        } else {
          this.$message.error(res.data.msg || '获取数据失败');
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取所有科目
     */
    getSubjects() {
      this.$http.get('/dictType/subject_code').then(res => {
        this.loading = false;
        if (res.data.code === 200) {
          this.subjects = res.data.result;
        } else {
          this.$message.error(res.data.msg || '获取数据失败');
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  },
  watch: {
    showAddFacultyForm(val) { // 监听该值的变化
      this.showFacultyDialog = val;
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}
.el-dialog-div{
  padding-right: 10px;
  height: 60vh;
  overflow: auto;
}

</style>
